<template>
    <view>
        <u-popup v-model="show" mode="right">
            <view class="content safe-area-inset-bottom" @tap.stop>
                <view class="title">筛选</view>
                <o-tab-select ref="child1" title="分类" muti :selectArr="optionArr1" :list="category" @select="handleCategory"/>
                <o-tab-select ref="child2" title="品类" muti :selectArr="optionArr2" :list="classify" @select="handleClassify"/>
                <view class="title">
                    价格范围
                    <view class="u-flex u-row-between u-col-center u-margin-top-20">
                        <u-input v-model="ob.minPrice" type="number" placeholder="最低价" border input-align="center"
                            :clearable="false"
                            class="bottom-price"></u-input>
                        <text class="line"></text>
                        <u-input v-model="ob.maxPrice" type="number" placeholder="最高价" border input-align="center"
                            :clearable="false"
                            class="top-price"></u-input>
                    </view>
                </view>
                <o-tab-select ref="child3" title="产品服务" :list="services" :selectArr="optionArr3" square muti @select="handleProductService"/>
            </view>
            <view class="btns u-flex u-m-t-20 u-row-around safe-area-inset-bottom">
                <u-button type="d" class="u-flex-1 u-margin-right-20" @click="reset">重置</u-button>
                <u-button type="p" class="u-flex-1" @click="submit">确定</u-button>
            </view>
        </u-popup>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import oTabSelect from './tab-select.vue'

const show = ref(false)
/** 保存 操作的数组 */
const optionArr1 = ref<Array<any>>([])
/** 保存 操作的数组 */
const optionArr2 = ref<Array<any>>([])
/** 保存 操作的数组 */
const optionArr3 = ref<Array<any>>([])

const category = ref([])
const classify = ref([])
const services = ref([])

const ob = ref<any>({})

const child1 = ref<any>(null)
const child2 = ref<any>(null)
const child3 = ref<any>(null)

function toggle() {
    show.value = !show.value;
    datainit()
}

function datainit() {
    uni.$u.$api.GoodsApi.querySaleLabelList().then((res: any) => {
        category.value = res.classifies.map((m: any) => {
            let result: any = {
                name: m.name,
                id: m.id
            }
            if (m.children) result.children = m.children
            return result
        })
        classify.value = res.goodsSaleLabels.map((m: any) => {
            return {
                name: m.name,
                id: m.id
            }
        })
        services.value = res.goodsServiceLabels.map((m: any) => {
            return {
                name: m.name,
                id: m.id
            }
        })
    })
}

defineExpose({toggle})

const emit = defineEmits(['on-submit'])

function submit() {
    emit('on-submit', ob.value);
    show.value = false;
}

/**
 *
 * @param value 可能为数组
 * @param arr 为选择的项
 */
function handleCategory(value: any, arr: Array<any>) {
    optionArr1.value = arr
    ob.value.groupId = value;
}
function handleClassify(value: any, arr: Array<any>) {
    optionArr2.value = arr
    ob.value.labelIds = value;
}

function handleProductService(value: any, arr: Array<any>) {
    optionArr3.value = arr
    ob.value.serviceLabelId = value;
}

function reset() {
    child1.value.reset()
    child2.value.reset()
    child3.value.reset()
    optionArr1.value = []
    optionArr2.value = []
    optionArr3.value = []
    ob.value = {}
}
</script>

<style scoped lang="scss">
.content {
        width: calc(100vw - 126rpx);
        padding: 0 30rpx;
        height: 100%;
        padding-top: calc(var(--status-bar-height) + 44px);

        .title {
            margin-top: 57rpx;
            font-size: 30rpx;
            font-weight: 600;
            color: #333333;

            .line {
                border: 1rpx solid black;
                width: 80rpx;
                margin: 0 20rpx;
            }
        }
    }

    .btns {
        background-color: #ffffff;
        position: fixed;
        width: 100%;
        bottom: 20rpx;
        padding: 20rpx;
    }
</style>
